<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">数据字典</span>
        </el-col>
      </el-row>

      <div class="datadiction">
        <el-container>
          <el-aside width="220px" class="aside">
            <el-row type="flex" style="text-align: center;">
              <el-col>
                  <!-- <el-button
                    class="delcon"
                    size="small"
                    round
                    @click="detailClick"
                  >详情
                  </el-button> -->
                  <el-button
                    class="newcon"
                    size="small"
                    round
                    @click="addClick"
                  >新增
                  </el-button>
                  <el-button
                    class="edit"
                    size="small"
                    round
                    @click="editClick"
                  >修改
                  </el-button>
                  <el-button
                    class="delete"
                    size="small"
                    round
                    @click="deleteClick"
                  >删除
                  </el-button>
              </el-col>
            </el-row>
            <el-scrollbar style="width:100%;height: 340px;">
              <div class="posttable" style="height:300px;">
                <el-table
                 :data="tableData"
                 ref="multipleTable"
                 highlight-current-row
                 @current-change="handleCurrentChange"
                 @click="detailClick"
                 class="asidetable">
                 <el-table-column label="字典名称">
                   <template slot-scope="scope">
                       <span>{{scope.row.dictionaryName}}</span>
                   </template>
                 </el-table-column>
               </el-table>
              </div>
            </el-scrollbar>

          </el-aside>
          <el-main style="height:500px;">
            <div class="posttable">
              <el-row type="flex" justify="center">
                <el-col :span="23">
                    <div style="margin-bottom:20px;float: right;">
                        <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
                           <el-button
                              class="newcon1"
                              size="small"
                              round
                              @click="addClick1"
                              >新增
                              </el-button>
                              <el-button
                              class="edit1"
                              size="small"
                              round
                              @click="editClick1"
                              >修改
                              </el-button>
                              <el-button
                              class="delete1"
                              size="small"
                              round
                              @click="deleteClick1"
                              >删除
                           </el-button>
                        </el-row>
                    </div>
                </el-col>
              </el-row>
              <div class="datadictionary">
                 <el-row type="flex" justify="center">
                    <el-col :span="23">
                      <el-table
                          :data="tableData1"
                          ref="multipleTable"
                          highlight-current-row
                          @current-change="handleCurrentChange1"
                          style="width: 100%">
                          <el-table-column
                            prop="dictionaryValue"
                            label="字典值"
                            >
                          </el-table-column>
                          <el-table-column
                            prop="dictionaryValueMeaning"
                            label="字典值含义"
                           >
                          </el-table-column>
                        </el-table>
                        <div class="pager">
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="pagehandleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5,10,15]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalcount">
                          </el-pagination>
                        </div>
                    </el-col>
                </el-row>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>

    <el-dialog
      title="错误"
      :visible.sync="dangerialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog">
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何信息</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
   </el-dialog>

    <el-dialog
      title="添加字典"
      :visible.sync="adddialogVisible"
      ref="backcheckeRefs"
      :model="backcheckForm"
      :rules="backcheckeRules"
      width="420px"
      @close="addDialogClosed"
      :close-on-click-modal="false"
      class="addP">
        <el-form
          :model="backcheckForm"
          :rules="backcheckeRules"
          ref="backcheckRefs">
          <!-- <el-form-item label="用户姓名:" prop="name">
            <el-input v-model="backcheckForm1.name" :disabled="true"></el-input>
          </el-form-item> -->
          <el-form-item label="字典名称:" prop="dictionaryName">
            <el-input v-model="backcheckForm.dictionaryName" clearable placeholder="请输入字典名称"></el-input>
          </el-form-item>
          <el-form-item label="字典代码:" prop="dictionaryCode">
              <el-input v-model="backcheckForm.dictionaryCode" clearable placeholder="请输入字典代码"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" round @click="adddialogVisible = false">取 消</el-button>
        <el-button class="checked" round type="primary" @click="this.queryInfo">添加</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改字典"
      :visible.sync="editdialogVisible"
      ref="backcheckRefs1"
      :model="backcheckForm1"
      :rules="backcheckeRules1"
      width="420px"
      @close="editDialogClosed"
      :close-on-click-modal="false"
      class="addP">
        <el-form
          :model="backcheckForm1"
          :rules="backcheckeRules1"
          ref="backcheckRefs1">
          <!-- <el-form-item label="用户姓名:" prop="name">
            <el-input v-model="backcheckForm1.name" :disabled="true"></el-input>
          </el-form-item> -->
          <el-form-item label="字典名称:" prop="dictionaryName">
            <el-input v-model="backcheckForm1.dictionaryName" clearable placeholder="请输入字典名称"></el-input>
          </el-form-item>
          <el-form-item label="字典代码:" prop="dictionaryCode">
              <el-input v-model="backcheckForm1.dictionaryCode" clearable placeholder="请输入字典代码"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" round @click="editdialogVisible = false">取 消</el-button>
        <el-button class="checked" round type="primary" @click="this.queryInfo1">确认修改</el-button>
      </span>
    </el-dialog>

     <el-dialog
      title="删除字典"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="handleClose1"
      class="deletedialog">
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">确认删除此条字典内容吗？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen1">确 定</el-button>
        <el-button round @click="handleClose1" class="cancel">取 消</el-button>
      </span>
    </el-dialog>

   <el-dialog
      title="提示"
      :visible.sync="dangerialogVisible1"
      width="30%"
      :before-close="handleClose22"
      class="deletedialog">
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">请先选择字典名称展示字典值信息</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen22">确 定</el-button>
        <el-button round @click="handleClose22" class="cancel">取 消</el-button>
      </span>
   </el-dialog>

    <el-dialog
      title="添加字典值"
      :visible.sync="adddialogVisible1"
      ref="backcheckRefs2"
      :model="backcheckForm2"
      :rules="backcheckeRules2"
      width="420px"
      @close="addDialogClosed1"
      :close-on-click-modal="false"
      class="addP">
        <el-form
          :model="backcheckForm2"
          :rules="backcheckeRules2"
          ref="backcheckRefs2">
          <!-- <el-form-item label="用户姓名:" prop="name">
            <el-input v-model="backcheckForm1.name" :disabled="true"></el-input>
          </el-form-item> -->
          <el-form-item label="字典值:" prop="dictionaryValue">
            <el-input v-model="backcheckForm2.dictionaryValue" clearable placeholder="请输入字典值"></el-input>
          </el-form-item>
          <el-form-item label="字典值含义:" prop="dictionaryValueMeaning">
              <el-input v-model="backcheckForm2.dictionaryValueMeaning" clearable placeholder="请输入字典值含义"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" round @click="adddialogVisible1 = false">取 消</el-button>
        <el-button class="checked" round type="primary" @click="this.queryInfo2">添加</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改字典值"
      :visible.sync="editdialogVisible1"
      ref="backcheckRefs3"
      :model="backcheckForm3"
      :rules="backcheckeRules3"
      width="420px"
      @close="editDialogClosed1"
      :close-on-click-modal="false"
      class="addP">
        <el-form
          :model="backcheckForm3"
          :rules="backcheckeRules3"
          ref="backcheckRefs3">
          <!-- <el-form-item label="用户姓名:" prop="name">
            <el-input v-model="backcheckForm1.name" :disabled="true"></el-input>
          </el-form-item> -->
          <el-form-item label="字典名称:" prop="dictionaryValue">
            <el-input v-model="backcheckForm3.dictionaryValue" clearable placeholder="请输入字典值"></el-input>
          </el-form-item>
          <el-form-item label="字典代码:" prop="dictionaryValueMeaning">
              <el-input v-model="backcheckForm3.dictionaryValueMeaning" clearable placeholder="请输入字典值含义"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" round @click="editdialogVisible1 = false">取 消</el-button>
        <el-button class="checked" round type="primary" @click="this.queryInfo3">确认修改</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="删除字典值"
      :visible.sync="deletedialogVisible1"
      width="30%"
      :before-close="handleClose2"
      class="deletedialog">
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">确认删除此条字典值内容吗？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen2">确 定</el-button>
        <el-button round @click="handleClose2" class="cancel">取 消</el-button>
      </span>
    </el-dialog>




  </div>
</template>

<script>

import axios from 'axios'

export default {
  data() {
    return {
        tableData: [],
        // 存储字典行数据
        currentRow:null,
         // 存储字典值行数据
        currentRow1:null,
        // 存储字典id值
        dataid:'',
         // 存储字典值id值
        dataid1:'',
        // 字典值数据
        tableData1: [],
        dangerialogVisible: false,
        adddialogVisible: false,
        editdialogVisible: false,
        deletedialogVisible: false,
        dangerialogVisible1: false,
        adddialogVisible1: false,
        editdialogVisible1: false,
        deletedialogVisible1: false,
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        backcheckForm: {
          dictionaryName:'',
          dictionaryCode:''
        },
        backcheckForm1: {
          dictionaryName:'',
          dictionaryCode:''
        },
        backcheckForm2:{
          dictionaryValue: '',
          dictionaryValueMeaning:''
        },
        backcheckForm3:{
          dictionaryValue: '',
          dictionaryValueMeaning:''
        },
        backcheckeRules:{
          dictionaryName:[
            { required: true, message: '请输入字典名称', trigger: 'blur' }
          ],
          dictionaryCode:[
            { required: true, message: '请输入字典代码', trigger: 'blur' }
          ]
        },
        backcheckeRules1:{
          dictionaryName:[
            { required: true, message: '请输入字典名称', trigger: 'blur' }
          ],
          dictionaryCode:[
            { required: true, message: '请输入字典代码', trigger: 'blur' }
          ]
        },
        backcheckeRules2:{
          dictionaryValue:[
            { required: true, message: '请输入字典值', trigger: 'blur' }
          ],
          dictionaryValueMeaning:[
            { required: true, message: '请输入字典值含义', trigger: 'blur' }
          ]
        },
        backcheckeRules3:{
          dictionaryValue:[
            { required: true, message: '请输入字典值', trigger: 'blur' }
          ],
          dictionaryValueMeaning:[
            { required: true, message: '请输入字典值含义', trigger: 'blur' }
          ]
        }


    }
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取字典信息列表
    getData() {
      axios.post(this.url + "/datadictionarymain/getmain").then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            // console.log(this.tableData)
          }
        })
    },
    // 点击确认，关闭错误提示框
    handleOpen() {
      this.dangerialogVisible = false;
    },
     // 点击取消，关闭错误提示框
    handleClose() {
        this.dangerialogVisible = false;
    },
    // 字典选中行，获取对应字典值信息
    handleCurrentChange(info) {
        this.currentRow = info;
        if(this.currentRow !=null && this.dataid != null) {  //防止选中行进行添加操作，传Id空值
          this.dataid = this.currentRow.id;
          this.getDataDetial();
        }

    },
    // 获取字典值详情信息
    getDataDetial() {
       axios.post(this.url + "/datadictionarymain/getdetailall",{
          "id":Number(this.dataid),
          "pageSize":this.pagesize,
          "pageNum":this.currentPage
        }).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.tableData1 = res.data.data.list;
            this.totalcount = res.data.data.total;
            // console.log(this.tableData1)
          }
        })
    },
    detailClick() {
      if(this.currentRow == null) {
          this.dangerialogVisible = !this.dangerialogVisible;
      } else {
          this.dataid = this.currentRow.id;
          this.getDataDetial();
      }
      // console.log(this.dataid)
    },

    // 添加字典
    addClick() {
      this.adddialogVisible = !this.adddialogVisible;

    },
    // 确认添加字典
    queryInfo() {
      this.$refs.backcheckRefs.validate((valid) => {
        if(valid) {
          axios.post(this.url + "/datadictionarymain/adddatadictionarymain",{
            "dictionaryName": this.backcheckForm.dictionaryName,
            "dictionaryCode": this.backcheckForm.dictionaryCode
          }).then(res => {
            this.unlogin(res.data.code)
            if(res.data.code == 200) {
              this.getData();
              this.adddialogVisible = false;
            }
          })
        }
      })
    },
    // 关闭添加字典弹出框
     addDialogClosed() {
      this.$refs.backcheckRefs.resetFields();
    },
    // 修改字典
    editClick() {
      if(this.currentRow == null) {
        this.dangerialogVisible = !this.dangerialogVisible;
      } else {
        this.dataid = this.currentRow.id;
        this.backcheckForm1.dictionaryName = this.currentRow.dictionaryName;
        this.backcheckForm1.dictionaryCode = this.currentRow.dictionaryCode;
        this.editdialogVisible = !this.editdialogVisible;
      }
    },
    // 确认修改字典
    queryInfo1() {
        this.$refs.backcheckRefs1.validate((valid) => {
        if(valid) {
          axios.post(this.url + "/datadictionarymain/updatedatadictionarymain",{
            "id": Number(this.dataid),
            "dictionaryName": this.backcheckForm1.dictionaryName,
            "dictionaryCode": this.backcheckForm1.dictionaryCode
          }).then(res => {
            this.unlogin(res.data.code)
            if(res.data.code == 200) {
              this.getData();
              this.editdialogVisible = false;
            }
          })
        }
      })
    },
    // 修改字典表单重置
    editDialogClosed() {
      this.$refs.backcheckRefs1.resetFields();
    },
    // 删除字典
    deleteClick() {
      if(this.currentRow == null) {
        this.dangerialogVisible = !this.dangerialogVisible
      } else {
        this.dataid = this.currentRow.id;
        this.deletedialogVisible = !this.deletedialogVisible;
      }
    },
    // 确认删除字典信息
    handleOpen1() {
      axios.post(this.url + "/datadictionarymain/deletedatadictionarymain",{
          "id": Number(this.dataid)
          }).then(res => {
            this.unlogin(res.data.code)
            if(res.data.code == 200) {
              this.getData();
              this.deletedialogVisible = false;
            }
        })
    },
    // 取消删除字典信息
     handleClose1() {
        this.deletedialogVisible = false;
    },
    // 切换页码显示条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.getDataDetial();
    },
    // 切换页码
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.getDataDetial();
    },
    // 添加字典值
    addClick1() {
      if(this.dataid == "") {
        this.dangerialogVisible1 = !this.dangerialogVisible1;
      } else {
        this.adddialogVisible1 = !this.adddialogVisible1;
        // console.log(this.dataid)
      }
    },
    // 点击确认，关闭错误提示框
    handleOpen22() {
      this.dangerialogVisible1 = false;
    },
    // 点击确认，关闭错误提示框
    handleClose22() {
        this.dangerialogVisible1 = false;
    },
    // 确认添加字典值
    queryInfo2() {
        this.$refs.backcheckRefs2.validate((valid) => {
        if(valid) {
          axios.post(this.url + "/datadictionarymain/adddatadictionarydetail",{
            "id": Number(this.dataid),
            "dictionaryValue": this.backcheckForm2.dictionaryValue,
            "dictionaryValueMeaning": this.backcheckForm2.dictionaryValueMeaning
          }).then(res => {
            this.unlogin(res.data.code)
            if(res.data.code == 200) {
              this.getDataDetial();
              this.adddialogVisible1 = false;
            }
          })
        }
      })
    },
    // 关闭添加字典值弹出框
     addDialogClosed1() {
      this.$refs.backcheckRefs2.resetFields();
    },
    // 获取修改字典值当前行
    handleCurrentChange1(info) {
        this.currentRow1 = info;
    },
    // 修改字典值
    editClick1() {
      if(this.currentRow1 == null) {
        this.dangerialogVisible = !this.dangerialogVisible;
      } else {
        this.dataid1 = this.currentRow1.id;
        this.backcheckForm3.dictionaryValue = this.currentRow1.dictionaryValue;
        this.backcheckForm3.dictionaryValueMeaning = this.currentRow1.dictionaryValueMeaning;
        this.editdialogVisible1 = !this.editdialogVisible1;
        console.log(this.dataid1)
      }
    },
    // 确认修改字典值
    queryInfo3() {
      this.$refs.backcheckRefs3.validate((valid) => {
        if(valid) {
          axios.post(this.url + "/datadictionarymain/updaedatadictionarydetail",{
            "id": Number(this.dataid1),
            "dictionaryValue": this.backcheckForm3.dictionaryValue,
            "dictionaryValueMeaning": this.backcheckForm3.dictionaryValueMeaning
          }).then(res => {
            this.unlogin(res.data.code)
            if(res.data.code == 200) {
              this.getDataDetial();
              this.editdialogVisible1 = false;
            }
          })
        }
      })
    },
    // 关闭修改字典值弹出框
    editDialogClosed1() {
      this.$refs.backcheckRefs3.resetFields();
    },
    // 删除字典值
    deleteClick1() {
      if(this.currentRow1 == null) {
        this.dangerialogVisible = !this.dangerialogVisible
      } else {
        this.dataid1 = this.currentRow1.id;
        this.deletedialogVisible1 = !this.deletedialogVisible1;
      }
    },
    // 确认删除字典值信息
    handleOpen2() {
      axios.post(this.url + "/datadictionarymain/deletedatadictionarydetail",{
          "id": Number(this.dataid1)
          }).then(res => {
            this.unlogin(res.data.code)
            if(res.data.code == 200) {
              this.getDataDetial();
              this.deletedialogVisible1 = false;
            }
        })
    },
    // 取消删除字典值信息
     handleClose2() {
        this.deletedialogVisible1 = false;
    },

  }
}
</script>

<style scoped>
  .title {
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      padding-left: 20px;
      margin-top: 6px;
      margin-bottom: 6px;
  }
  .hand {
    color: #1099ff;
  }
  .datadiction {
    height: 800px;
    background-color: #fff;
    margin: 10px 0px 0px -20px;
  }
  .aside {
    height: 380px;
    border: solid 1px #ccc;
    margin: 10px 10px 0px 10px;
    overflow-y : hidden;
  }

  .asidetable {
    width: 100%;
    cursor: pointer;

  }
  .posttable .el-table thead {
    color: #333;
    font-size: 14px;
  }

  .posttable1 .el-table {
    font-size: 12px;
  }

  .posttable1 .el-table tr {
    height: 40px;
    line-height: 40px;
    background-color: #f4f7f9;
  }

  .posttable1 .el-table tr td {
    padding: 5px 0;
  }

  .posttable1 .el-table__body tr.current-row > td {
    background-color: #e5edfc;
  }

  .posttable1 .el-button + .el-button {
    margin-left: 1px;
  }

  .posttable1 .el-table td, .el-table th.is-leaf {
    border-bottom: 2px solid #fff;
  }

  .posttable1 .el-table th, .el-table tr {
    background-color: #f4f7f9;
  }

  .posttable1 .el-table__row td:nth-child(1) {
    color: #1198ff;
  }
  .el-table_1_column_1 {
    background-color: #fff;
  }
  .delcon {
    width: 60px;
    height: 28px;
    padding: 7px 8px !important;
    opacity: 0.86;
    color: #fff;
    background: #8B864E;
    margin-left: 5px;
  }
  .delcon:hover {
    color: #fff !important;
  }
  .newcon {
    width: 50px;
    height: 26px;
    padding: 5px 8px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    margin-left: 5px;
  }
  .newcon:hover {
    color: #fff !important;
  }
  .edit {
    width: 50px;
    height: 26px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 5px 8px !important;
    margin-left: 0px;
  }
  .edit:hover {
    color: #fff !important;
  }
  .delete {
    width: 50px;
    height: 26px;
    padding: 5px 8px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    margin-left: 0px;
  }
  .delete:hover {
    color: #fff !important;
  }
  .el-main {
    padding:0px 10px;
    margin: 10px 10px 0px 10px;
    border: solid 1px #ccc;
  }
  .newcon1 {
    width: 60px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  .newcon1:hover {
    color: #fff !important;
  }
  .edit1 {
    width: 60px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
    margin-left: 8px;
  }
  .edit1:hover {
    color: #fff !important;
  }
  .delete1 {
    width: 60px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
  }
  .delete1:hover {
    color: #fff !important;
  }
  .datadictionary {
    width: 100%;
  }
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }

</style>
